import React, { useEffect, useState } from 'react';
/*
  学习目标：在React中使用Redux管理数据, 
    使用Redux记住数据，不随组件的卸载而清空
*/

// 1. 把store放入store文件中，导入仓库
import store from './store/index.js.js';
export default function App() {
  const [show, setShow] = useState(true);
  return (
    <div>
      <h1>Redux基础案例</h1>
      <button onClick={() => setShow(!show)}>点击切换卸载挂载</button>
      {show ? <Son /> : null}
    </div>
  );
}

function Son() {
  // 2. 给Son设置初始状态
  const [count, setCount] = useState(store.getState().count);

  useEffect(() => {
    // 3. 挂载后，监听仓库store的变化，将变化同步给React中的state
    const unFn = store.subscribe(() => {
      setCount(store.getState().count);
    });

    // 4. 卸载监听的数据
    return () => {
      unFn();
    };
  }, []);

  return (
    <div>
      <h2>子组件</h2>
      <h2>count:{count}</h2>
      {/* 💥 Redux根视图没有任何关系，与React也没有绑定关系 */}
      <button onClick={() => store.dispatch({ type: 'add' })}>+1</button>
      <button onClick={() => store.dispatch({ type: 'des' })}>-1</button>
    </div>
  );
}
